/** 
  课程管理
*/
<template>
    <div>
        <div v-if="ifShow === 'list'">
            <condition-card @reset="reset" @search="onSubmit">
                <el-form label-position="right" label-suffix="：" label-width="100px">
                    <el-row :gutter="24">
                        <el-col :span="8">
                            <!-- 审批状态 -->
                            <el-form-item :label="$t('courseList.approvalStatus')">
                                <el-select
                                    v-model.trim="queryForm.condition.approvalStatus"
                                    clearable
                                    style="width: 100%"
                                >
                                    <el-option
                                        v-for="item in options.approvalStatus"
                                        :key="item.value"
                                        :label="item.label"
                                        :value="item.value"
                                    ></el-option>
                                </el-select>
                            </el-form-item>
                        </el-col>
                        <!-- 学院 -->
                        <el-col :span="8">
                            <!-- 开课学院 -->
                            <el-form-item :label="$t('courseList.college')">
                                <el-select
                                    v-model.trim="queryForm.condition.college"
                                    clearable
                                    filterable
                                    style="width: 100%"
                                >
                                    <el-option
                                        v-for="item in options.faculty"
                                        :key="item.value"
                                        :label="item.label"
                                        :value="item.value"
                                    ></el-option>
                                </el-select>
                            </el-form-item>
                        </el-col>
                        <el-col :span="8">
                            <!-- 发布状态 -->
                            <el-form-item :label="$t('courseList.postStatus')">
                                <el-select
                                    v-model.trim="queryForm.condition.postStatus"
                                    clearable
                                    filterable
                                    style="width: 100%"
                                >
                                    <el-option
                                        v-for="item in options.states"
                                        :key="item.value"
                                        :label="item.label"
                                        :value="item.value"
                                    ></el-option>
                                </el-select>
                            </el-form-item>
                        </el-col>
                    </el-row>
                    <el-row :gutter="24">
                        <el-col :span="8">
                            <!-- 申请人 -->
                            <el-form-item :label="$t('courseList.applicantOrId')">
                                <el-input
                                    v-model.trim="queryForm.condition.applicantOrId"
                                    style="width: 100%"
                                ></el-input>
                            </el-form-item>
                        </el-col>
                        <el-col :span="8">
                            <!-- 是否必修 -->
                            <el-form-item :label="$t('courseList.required')">
                                <el-select
                                    v-model.trim="queryForm.condition.required"
                                    clearable
                                    filterable
                                    style="width: 100%"
                                >
                                    <el-option
                                        v-for="item in options.required"
                                        :key="item.value"
                                        :label="item.label"
                                        :value="item.value"
                                    ></el-option>
                                </el-select>
                            </el-form-item>
                        </el-col>
                    </el-row>
                </el-form>
                <!-- 搜索框结束 -->

                <!-- 列表页开始 -->
            </condition-card>
            <el-card shadow="never" v-loading="loading" body-style="padding: 24px;">
                <!-- 课程管理 -->
                <h1 class="condition-title">{{ $t('courseList.courseManage') }}</h1>
                <div class="sub-title">
                    <div class="float-left">
                        <!-- 搜索框 请输入课程名称搜索-->
                        <el-input
                            v-model.trim="queryForm.condition.title"
                            :placeholder="$t('courseList.searchCourse')"
                            style="width: 250px"
                            @keyup.enter.native="onSubmit"
                        >
                            <i
                                slot="suffix"
                                class="el-icon-search"
                                style="margin-top: 10px; cursor: pointer"
                                @click="onSubmit"
                            ></i>
                        </el-input>
                    </div>
                    <div class="float-right" style="display: flex">
                        <!-- 导出 -->
                        <el-button type="primary" @click="exportCourse()">
                            {{ $t('base.exportMenu') }}
                        </el-button>
                        <!-- 创建课程 -->
                        <el-button type="primary" @click="addCourse()">
                            {{ $t('courseList.addCourse') }}
                        </el-button>
                    </div>
                    <br />
                </div>

                <edu-table
                    :pagination="false"
                    :order="false"
                    :tooltipEffect="tooltipEffect"
                    stripe
                    :data="dataList"
                    size="mini"
                    @selection-change="handleSelectionChange"
                >
                    <!-- 课程名称 -->
                    <edu-table-column
                        :label="$t('courseList.title')"
                        prop="title"
                    ></edu-table-column>
                    <!-- 是否必修 -->
                    <edu-table-column :label="$t('courseList.required')" prop="required">
                        <template slot-scope="scope">
                            <el-tag
                                v-if="scope.row.required !== null"
                                :type="scope.row.required | getEnable"
                            >
                                {{ scope.row.required | required }}
                            </el-tag>
                        </template>
                    </edu-table-column>
                    <!-- 开课学院 -->
                    <edu-table-column
                        :label="$t('courseList.college')"
                        prop="collegeName"
                    ></edu-table-column>
                    <!-- 发布状态 -->
                    <edu-table-column :label="$t('courseList.postStatus')" prop="postStatus">
                        <template slot-scope="scope">
                            <el-tag
                                v-if="scope.row.postStatus !== null"
                                :type="scope.row.postStatus | getEnable"
                            >
                                {{ scope.row.postStatus | postStatus }}
                            </el-tag>
                        </template>
                    </edu-table-column>
                    <!-- 申请人 -->
                    <edu-table-column
                        :label="$t('courseList.applicantOrId')"
                        prop="applicant"
                    ></edu-table-column>
                    <!-- 审核状态 -->
                    <edu-table-column
                        :label="$t('courseList.approvalStatus')"
                        prop="approvalStatus"
                    >
                        <template slot-scope="scope">
                            <el-tag
                                v-if="scope.row.approvalStatus !== null"
                                :type="scope.row.approvalStatus | getType"
                            >
                                {{ scope.row.approvalStatus | approvalStatus }}
                            </el-tag>
                        </template>
                    </edu-table-column>

                    <!-- 操作 -->
                    <edu-table-column :label="$t('base.operate')" fit width="200">
                        <template slot-scope="scope">
                            <!-- 编辑 -->
                            <el-button
                                type="text"
                                @click="editCourse(scope.row.id)"
                                v-show="
                                    ((scope.row.approvalStatus === 2 &&
                                        scope.row.postStatus === 0) ||
                                        scope.row.approvalStatus === 3) &&
                                    (isFacultyStaff === 1 || isAdministrator === 1)
                                "
                            >
                                {{ $t('base.editMenu') }}
                            </el-button>
                            <!-- 删除 -->
                            <el-button
                                type="text"
                                @click="delCourse(scope.row)"
                                v-show="
                                    ((scope.row.approvalStatus === 2 &&
                                        scope.row.postStatus === 0) ||
                                        scope.row.approvalStatus === 3) &&
                                    (isFacultyStaff === 1 || isAdministrator === 1)
                                "
                            >
                                {{ $t('base.deleteMenu') }}
                            </el-button>
                            <!-- 发布 -->
                            <el-button
                                type="text"
                                @click="releaseCourse(scope.row.id)"
                                v-show="
                                    scope.row.postStatus === 0 &&
                                    scope.row.approvalStatus === 2 &&
                                    (isFacultyStaff === 1 || isAdministrator === 1)
                                "
                            >
                                {{ $t('courseList.release') }}
                            </el-button>
                            <!-- 查看 -->
                            <el-button type="text" @click="viewCourse(scope.row.id)">
                                {{ $t('courseList.view') }}
                            </el-button>
                            <!-- 取消发布 -->
                            <el-button
                                type="text"
                                @click="cancelCourse(scope.row.id)"
                                v-show="
                                    scope.row.postStatus === 1 &&
                                    scope.row.approvalStatus === 2 &&
                                    (isFacultyStaff === 1 || isAdministrator === 1)
                                "
                            >
                                {{ $t('courseList.cancelCourse') }}
                            </el-button>
                        </template>
                    </edu-table-column>
                </edu-table>
                <el-row type="flex" class="row-bg" justify="end">
                    <el-col>
                        <el-pagination
                            @size-change="handleSizeChange"
                            @current-change="handleCurrentChange"
                            :current-page="queryForm.pageNum_"
                            :page-sizes="[20, 40, 80, 100]"
                            :page-size="queryForm.pageSize_"
                            layout="total, sizes, prev, pager, next, jumper"
                            :total="queryForm.total_"
                            style="float: right; margin-top: 10px"
                        ></el-pagination>
                    </el-col>
                </el-row>
            </el-card>

            <edu-export-dialog :title="$t('message.prompt')" ref="downloadRef"></edu-export-dialog>
        </div>
        <div v-if="ifShow === 'add'">
            <course-Add @returnVal="changekey" :submitType="submitType" :Id="Id"></course-Add>
        </div>
        <div v-if="ifShow === 'view'">
            <view-Course @returnVal="changekey" :Id="Id"></view-Course>
        </div>
    </div>
</template>
<script>
var _THIS
import { queryDic } from 'common/src/api/dictionary'
import baseUrl from 'common/src/api/internationalCommunication/env'
import UTILS from 'common/src/utils/utils'
import courseAdd from './courseAdd'
import viewCourse from './common/viewCourse'
import courseManageApi from 'common/src/api/academicBehaviorNorms/lessonManage/courseManage'
// import { downloadimage } from 'common/src/api/minor/minorCulturePlanManager'
export default {
    components: {
        'course-Add': courseAdd,
        'view-Course': viewCourse,
    },
    data() {
        return {
            ifShow: 'list',
            submitType: '',
            Id: '',
            queryForm: {
                pageNum_: 1,
                pageSize_: 20,
                total_: 0,
                condition: {
                    college: '',
                    approvalStatus: '',
                    postStatus: '',
                    required: '',
                    applicantOrId: '',
                    title: '',
                    isTeacher: '',
                    isFacultyStaff: '',
                    isAdministrator: '',
                },
            },
            dataList: [],
            isTeacher: 0,
            isFacultyStaff: 0,
            isAdministrator: 0,
            multipleSelection: [],
            options: {
                approvalStatus: [
                    // 已提交
                    { value: 1, label: this.$t('courseList.commit') },
                    // 通过
                    { value: 2, label: this.$t('courseList.pass') },
                    // 驳回
                    { value: 3, label: this.$t('courseList.retrun') },
                ],
                faculty: [],
                states: [
                    // 已发布
                    { value: 1, label: this.$t('courseList.haveReleased') },
                    // 未发布
                    { value: 0, label: this.$t('courseList.notReleased') },
                ],
                required: [
                    // 是
                    { label: this.$t('courseList.yes'), value: 1 },
                    // 否
                    { label: this.$t('courseList.no'), value: 0 },
                ],
            },
        }
    },
    computed: {},
    created() {
        _THIS = this
        let _this = this
        this.options.faculty = []
        this.getRole()

    },
    mounted() {
        // 初始化列表页
        this.getListData()
    },
    filters: {
        approvalStatus(val) {
            switch (val) {
                case 1:
                    // 已提交
                    return _THIS.$t('courseList.commit')

                case 2:
                    // 通过
                    return _THIS.$t('courseList.pass')
                case 3:
                    // 驳回
                    return _THIS.$t('courseList.retrun')
                default:
                    return ' '
            }
        },
        required(val) {
            switch (val) {
                case 1:
                    // 是
                    return _THIS.$t('courseList.yes')
                case 0:
                    // 否
                    return _THIS.$t('courseList.no')
                default:
                    return ' '
            }
        },
        getType(val) {
            switch (val) {
                case 1:
                    return 'info'
                case 2:
                    return 'success'
                case 3:
                    return 'warning'
                default:
                    return val
            }
        },
        postStatus(val) {
            switch (val) {
                case 1:
                    // 已发布
                    return _THIS.$t('courseList.haveReleased')
                case 0:
                    // 未发布
                    return _THIS.$t('courseList.notReleased')
                default:
                    return ' '
            }
        },
        getEnable(val) {
            switch (val) {
                case 1:
                    return 'success'
                case 0:
                    return 'info'
                default:
                    return ''
            }
        },
    },
    methods: {
        changekey(val) {
            this.ifShow = val
            this.getListData()
        },
        async initOptions() {
            this.options.faculty = []
            // 筛选条件字典查询
            let data = {
                lang: this.$store.getters.language || 'cn',
                type: 'allChild',
                keys: [
                    'X_YX', // 学院
                ],
            }
            await queryDic(data).then((res) => {
                this.options.faculty.push({
                    label: '校级公共课',
                    value: '校级公共课',
                })
                for (let key in res.data.X_YX) {
                    this.options.faculty.push({
                        label: res.data.X_YX[key],
                        value: key,
                    })
                }
            })
        },
        async getRole() {
            let _this = this
            if (localStorage.getItem('sessiondata')) {
                this.isTeacher = 0
                this.isFacultyStaff = 0
                this.isAdministrator = 0
                // 获取当前用户auths权限
                if (JSON.parse(localStorage.getItem('sessiondata')).auths) {
                    this.auths = JSON.parse(localStorage.getItem('sessiondata')).auths
                    if (this.auths) {
                        for (let i = 0; i < _this.auths.length; i++) {
                            if (_this.auths[i].authCode === 'academic-tempSet-isAdministrator') {
                                this.isAdministrator = 1
                            } else if (_this.auths[i].authCode === 'academic-tempSet-isFacultyStaff') {
                                this.isFacultyStaff = 1
                            } else if (_this.auths[i].authCode === 'academic-tempSet-isTeacher') {
                                this.isTeacher = 1
                            }
                        }
                    }
                }
                if(this.isAdministrator === 1) {
                    _this.initOptions()
                } else if(this.isFacultyStaff === 1 || this.isTeacher === 1) {
                    _this.getColleage()
                }
            }
        },
        getColleage() {
            this.options.faculty = []
            let parm = {
                isTeacher: this.isTeacher,
                isFacultyStaff: this.isFacultyStaff,
                isAdministrator: 0,
            }
            courseManageApi.facultyList(parm).then((res) => {
                if (res.code === 200) {
                    for (let key in res.data) {
                        this.options.faculty.push({ label: res.data[key], value: key })
                    }
                }
            })
        },
        addCourse() {
            this.submitType = 'add'
            this.ifShow = 'add'
        },
        editCourse(id) {
            this.submitType = 'edit'
            this.ifShow = 'add'
            this.Id = id
        },
        viewCourse(id) {
            this.ifShow = 'view'
            this.Id = id
        },
        // 发布课程
        releaseCourse(id) {
            let parm = {
                ids: [id],
            }
            courseManageApi.releaseCourse(parm).then((res) => {
                if (res.code === 200) {
                    this.$message({
                        // 发布成功
                        message: this.$t('courseList.releaseSuccess'),
                        type: 'success',
                    })
                    this.getListData()
                }
            })
        },
        // 取消发布
        cancelCourse(id) {
            let parm = {
                ids: [id],
            }
            courseManageApi.cancelPostCourse(parm).then((res) => {
                if (res.code === 200) {
                    this.$message({
                        // 取消发布成功
                        message: this.$t('courseList.cancelSuccessed'),
                        type: 'success',
                    })
                    this.getListData()
                }
            })
        },

        // 导出
        exportCourse() {
            let _this = this
            let parm = {
                college: this.queryForm.condition.college,
                approvalStatus: this.queryForm.condition.approvalStatus,
                postStatus: this.queryForm.condition.postStatus,
                required: this.queryForm.condition.required,
                applicantOrId: this.queryForm.condition.applicantOrId,
                title: this.queryForm.condition.title,
                ids: this.multipleSelection,
                isTeacher: this.isTeacher,
                isFacultyStaff: this.isFacultyStaff,
                isAdministrator: this.isAdministrator,
            }
            if (_this.dataList.length === 0) {
                //无数据
                _this.$message.error(this.$t('courseList.noData'))
            } else {
                this.$refs.downloadRef.open()
                courseManageApi.exportCourse(parm).then((res) => {
                    this.$message({
                        // 导出成功
                        message: this.$t('courseList.exportSuccess'),
                        type: 'success',
                    })
                    this.$refs.downloadRef.close()
                })
            }
        },
        // 重置筛选框
        reset() {
            this.queryForm = {
                pageNum_: 1,
                pageSize_: 20,
                total_: 0,
                condition: {
                    college: '',
                    approvalStatus: '',
                    postStatus: '',
                    required: '',
                    applicantOrId: '',
                    title: '',
                },
            }
            this.getListData()
        },

        // 查询按钮
        onSubmit() {
            this.queryForm.pageNum_ = 1
            this.queryForm.total_ = 0
            this.queryForm.pageSize_ = 20
            this.getListData()
        },

        // 获取列表
        getListData() {
            let _this = this
            this.dataList = []
            this.queryForm.condition.isTeacher = this.isTeacher
            this.queryForm.condition.isFacultyStaff = this.isFacultyStaff
            this.queryForm.condition.isAdministrator = this.isAdministrator
            courseManageApi.getCourseList(this.queryForm).then((res) => {
                res.data.list.forEach((revList) => {
                    _this.dataList.push(revList)
                    _this.queryForm.pageSize_ = res.data.pageSize_
                    _this.queryForm.total_ = res.data.total_
                    _this.queryForm.pageNum_ = res.data.pageNum_
                })
                _this.multipleSelection = []
            })
        },
        // 删除
        delCourse(row) {
            let _this = this
            let parm = {
                ids: [],
            }

            if (row) {
                this.multipleSelection = []
                this.multipleSelection.push({
                    ids: row.id,
                    postStatus: row.postStatus,
                    approvalStatus: row.approvalStatus,
                })
            }
            if (this.multipleSelection.length === 0) {
                // 请勾选数据
                _this.$message.error(this.$t('courseList.delwarning'))
            } else if (_this.multipleSelection.length > 0) {
                for (let i = 0; i < _this.multipleSelection.length; i++) {
                    if (
                        !(
                            (_this.multipleSelection[i].approvalStatus === 2 &&
                                _this.multipleSelection[i].postStatus === 0) ||
                            _this.multipleSelection[i].approvalStatus === 3
                        )
                    ) {
                        // 只有未发布和驳回状态数据可删除
                        _this.$message.error(this.$t('courseList.candel'))
                        return false
                    }
                }
                this.multipleSelection.forEach((proId) => {
                    parm.ids.push(proId.ids)
                })
                this.$delConfirm().then((_) => {
                    courseManageApi.deleteCourse(parm).then((res) => {
                        if (res.code === 200) {
                            _this.$message({
                                // 删除成功
                                message: this.$t('courseList.delSuccess'),
                                type: 'success',
                            })
                            _this.queryForm.pageNum_ = 1
                            _this.queryForm.pageSize_ = 20
                            _this.getListData()
                        }
                    })
                })
            }
        },
        handleSelectionChange(val) {
            this.multipleSelection = []
            val.forEach((menu) => {
                this.multipleSelection.push(menu.id)
            })
        },
        handleSizeChange(val) {
            this.queryForm.pageSize_ = val
            this.getListData()
        },
        handleCurrentChange(val) {
            this.queryForm.pageNum_ = val
            this.getListData()
        },
    },
}
</script>
<style lang="scss" scoped>
</style>
